<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, ref, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { useDictStore } from '@/store/modules/dictData'
import { useUserStore } from '@/store/modules/user'
import { ElMessageBox } from 'element-plus'
import { Icon } from '@/components/Icon'
const { required } = useValidator()
const DictStore = useDictStore()
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  }
})
DictStore.setDict('secur_dev_state') //设备状态
DictStore.setDict('secur_wh_category') //热水器分类
DictStore.setDict('secur_sc_category') //灶具分类
DictStore.setDict('secur_alarm_category') //报警器分类
const trackFile = ref<string[]>([])
const rules = reactive({
  gasdevType: [required()]
})
const userStore = useUserStore()
const gasdevType = () => {
  return [
    { label: '热水器', value: '热水器' },
    { label: '燃气灶', value: '燃气灶' },
    { label: '壁挂炉', value: '壁挂炉' },
    { label: '报警器', value: '报警器' },
    { label: '波纹管', value: '波纹管' }
  ]
}

const formSchema = reactive<FormSchema[]>([
  {
    field: 'gasdevType',
    label: '燃气设备类型',
    component: 'Select',
    colProps: {
      span: 12
    },
    componentProps: {
      options: gasdevType(),
      on: {
        change: async (val: string) => {
          console.log(val)
          if (val == '热水器') {
            console.log(formSchema)
            formSchema[8].hidden = false
            formSchema[9].hidden = true
            formSchema[10].hidden = true
            formSchema[11].hidden = true
            formSchema[12].hidden = true
            formSchema[13].hidden = true
          } else if (val == '燃气灶') {
            formSchema[9].hidden = false
            formSchema[8].hidden = true
            formSchema[10].hidden = true
            formSchema[11].hidden = true
            formSchema[12].hidden = true
            formSchema[13].hidden = true
          } else if (val == '报警器') {
            formSchema[8].hidden = true
            formSchema[9].hidden = true
            formSchema[10].hidden = false
            formSchema[11].hidden = false
            formSchema[12].hidden = true
            formSchema[13].hidden = true
          } else if (val == '波纹管') {
            formSchema[8].hidden = true
            formSchema[9].hidden = true
            formSchema[10].hidden = true
            formSchema[11].hidden = true
            formSchema[12].hidden = false
            formSchema[13].hidden = false
          } else {
            formSchema[8].hidden = true
            formSchema[9].hidden = true
            formSchema[10].hidden = true
            formSchema[11].hidden = true
            formSchema[12].hidden = true
            formSchema[13].hidden = true
          }
        }
      }
    }
  },
  {
    field: 'isInstall',
    label: '是否安装',
    component: 'Select',
    colProps: {
      span: 12
    },
    componentProps: {
      options: DictStore.$state.secur_y_n?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'isExpire',
    label: '是否过期',
    component: 'Select',
    colProps: {
      span: 12
    },
    componentProps: {
      options: DictStore.$state.secur_y_n?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'installDate',
    label: '安装日期',
    component: 'DatePicker',
    componentProps: {
      type: 'date',
      valueFormat: 'YYYY-MM-DD'
    },
    colProps: {
      span: 12
    }
  },

  {
    field: 'useAge',
    label: '使用年限',
    component: 'InputNumber',
    colProps: {
      span: 12
    }
  },
  {
    field: 'brand',
    label: '品牌',
    component: 'Input',
    colProps: {
      span: 12
    }
  },
  {
    field: 'mountPos',
    label: '安装位置',
    component: 'Select',
    colProps: {
      span: 12
    },
    componentProps: {
      options: DictStore.$state.secur_mount_pos?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'devState',
    label: '设备状态',
    component: 'Select',
    colProps: {
      span: 12
    },
    componentProps: {
      options: DictStore.$state.secur_dev_state?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'whCategory',
    label: '热水器分类',
    component: 'Select',
    colProps: {
      span: 24
    },
    hidden: true,
    componentProps: {
      options: DictStore.$state.secur_wh_category?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'scCategory',
    label: '灶具分类',
    component: 'Select',
    colProps: {
      span: 24
    },
    hidden: true,
    componentProps: {
      options: DictStore.$state.secur_sc_category?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'alarmNo',
    label: '报警器编号',
    component: 'Input',
    colProps: {
      span: 24
    },
    hidden: true
  },
  {
    field: 'alarmCategory',
    label: '报警器分类',
    component: 'Select',
    colProps: {
      span: 24
    },
    hidden: true,
    componentProps: {
      options: DictStore.$state.secur_alarm_category?.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue
        }
      })
    }
  },
  {
    field: 'pipeLength',
    label: '管长',
    component: 'Input',
    hidden: true,
    colProps: {
      span: 24
    }
  },
  {
    field: 'pipeJointStyle',
    label: '管接头方式',
    component: 'Input',
    hidden: true,
    colProps: {
      span: 24
    }
  },
  {
    field: 'remark',
    label: '描述',
    component: 'Input',
    colProps: {
      span: 24
    }
  },
  {
    field: 'file',
    label: '附件',
    component: 'Upload',
    componentProps: {
      accept: 'image/*',
      action: '/api/file/upload',
      multiple: true,
      listType: 'picture-card',
      headers: { Authorization: userStore.getToken },
      beforeRemove: (uploadFile: any) => {
        return ElMessageBox.confirm(`确定要移除 ${uploadFile.name} ?`).then(
          () => true,
          () => false
        )
      },
      onSuccess: (file: any) => {
        trackFile.value.push(file.data.url)
        return file.data
      },
      slots: {
        default: () => <Icon icon="ep:plus" size={18} />,
        tip: () => <div class="el-upload__tip">请上传小于500KB的jpg/png</div>
      }
    },
    colProps: {
      span: 20
    }
  }
])
const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    formData.file = JSON.stringify(trackFile.value)
    return formData
  }
}

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  submit
})
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
</template>

